<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <base th:href="@{/}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>书城首页</title>
    <link rel="stylesheet" href="static/css/minireset.css"/>
    <link rel="stylesheet" href="static/css/common.css"/>
    <link rel="stylesheet" href="static/css/iconfont.css"/>
    <link rel="stylesheet" href="static/css/index.css"/>
    <link rel="stylesheet" href="static/css/swiper.min.css"/>
</head>
<body>
<div id="app">
    <div class="topbar">
        <div class="w">
            <div class="topbar-left">
                <i>送至:</i>
                <i>北京</i>
                <i class="iconfont icon-ai-arrow-down"></i>
            </div>
            <div class="topbar-right" th:if="${session.existUser == null}">
                <a th:href="@{/user(method=toLoginPage)}" class="login">登录</a>
                <a th:href="@{/user(method=toRegistPage)}" class="register">注册</a>
                <a th:href="@{/protect/cart(method=toCartPage)}" class="cart iconfont icon-gouwuche">
                    购物车
                    <div class="cart-num" v-if="cart == null || cart.totalCount == 0">0</div>
                    <div class="cart-num" v-else  v-text = "cart.totalCount">0</div>
                </a>
                <a href="manager.html" class="admin">后台管理</a>
            </div>
            <!--          登录后风格-->
            <div class="topbar-right" th:unless="${session.existUser == null}">
                <span>欢迎你 <b th:text="${session.existUser.userName}">张总</b></span>
                <a  @click.prevent="logout()" class="register">注销</a>
                <a th:href="@{/protect/cart(method=toCartPage)}" class="cart iconfont icon-gouwuche">
                    购物车
                    <div class="cart-num" v-if="cart == null || cart.totalCount == 0">0</div>
                    <div class="cart-num" v-else  v-text = "cart.totalCount">0</div>
                </a>
                <a href="manager.html" class="admin">后台管理</a>
            </div>
        </div>
    </div>
    <div class="header w">
        <a href="#" class="header-logo"></a>
        <div class="header-nav">
            <ul>
                <li><a href="#">java</a></li>
                <li><a href="#">前端</a></li>
                <li><a href="#">小说</a></li>
                <li><a href="#">文学</a></li>
                <li><a href="#">青春文学</a></li>
                <li><a href="#">艺术</a></li>
                <li><a href="#">管理</a></li>
            </ul>
        </div>
        <div class="header-search">
            <input type="text" placeholder="十万个为什么"/>
            <button class="iconfont icon-search"></button>
        </div>
    </div>
    <div class="banner w clearfix">
        <div class="banner-left">
            <ul>
                <li>
                    <a href="">
                        <span>文学 鉴赏</span>
                        <i class="iconfont icon-jiantou"></i
                        ></a>
                </li>
                <li>
                    <a href="">
                        <span>社科 研究</span>
                        <i class="iconfont icon-jiantou"></i
                        ></a>
                </li>
                <li>
                    <a href="">
                        <span>少儿 培训</span>
                        <i class="iconfont icon-jiantou"></i
                        ></a>
                </li>
                <li>
                    <a href="">
                        <span>艺术 赏析</span>
                        <i class="iconfont icon-jiantou"></i
                        ></a>
                </li>
                <li>
                    <a href="">
                        <span>生活 周边</span>
                        <i class="iconfont icon-jiantou"></i
                        ></a>
                </li>
                <li>
                    <a href="">
                        <span>文教 科技</span>
                        <i class="iconfont icon-jiantou"></i
                        ></a>
                </li>
                <li>
                    <a href="">
                        <span>热销 畅读</span>
                        <i class="iconfont icon-jiantou"></i
                        ></a>
                </li>
            </ul>
        </div>
        <div class="banner-right">
            <div class="swiper-container">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide">
                        <img src="static/uploads/banner4.jpg" alt="">
                        <!-- <div class="banner-img"></div> -->
                    </li>
                    <li class="swiper-slide">
                        <img src="static/uploads/banner5.jpg" alt="">
                        <!-- <div class="banner-img"></div> -->
                    </li>
                    <li class="swiper-slide">
                        <img src="static/uploads/banner6.jpg" alt="">
                        <!-- <div class="banner-img"></div> -->
                    </li>
                </ul>
                <div class="swiper-button-prev"></div>

                <div class="swiper-button-next"></div>

                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>

    <div class="books-list ">
        <div class="w">
            <div class="list">
                <div class="list-header">
                    <div class="title">图书列表</div>
                    <div class="price-search">
                        <span>价格:</span>
                        <input  type="text" v-model="floorPrice">
                        <span>-元</span>
                        <input  type="text" v-model="peakPrice">
                        <span>元</span>
                        <button @click="toPage(1)">查询</button>
                    </div>
                </div>
                <div>
                    <div class="list-content">
                        <div class="list-item" v-for="item in pageInfo.data">
                            <img :src="item.imgPath" alt="图片没找到">
                            <p>书名:<span v-text="item.bookName">活着</span></p>
                            <p>作者:<span v-text="item.author">余华</span></p>
                            <p>价格:￥<span v-text="item.price">66.6</span></p>
                            <p>销量:<span v-text="item.sales">230</span></p>
                            <p>库存:<span v-text="item.stock">1000</span></p>
                            <a @click.prevent="addBooK2Cart(item.bookId)">加入购物车</a>
                        </div>


                    </div>
                    <div class="list-footer">
                        <a v-if="pageInfo.currentPage != 1" @click.prevent="toPage(1)">首页</a>
                        <a v-if="pageInfo.currentPage != 1" @click.prevent="toPage(pageInfo.currentPage - 1)">上一页</a>
                        <ul>
                            <li :class="index == pageInfo.currentPage ? 'active' : ''" v-for="index of pageInfo.totalPage" v-text="index">1</li>
                        </ul>
                        <a v-if="pageInfo.currentPage != pageInfo.totalPage" @click.prevent="toPage(pageInfo.currentPage + 1)">下一页</a>
                        <a v-if="pageInfo.currentPage != pageInfo.totalPage" @click.prevent="toPage(pageInfo.totalPage)">末页</a>
                        <span>共<span v-text="pageInfo.totalPage">10</span>页</span>
                        <span><span v-text="pageInfo.totalSize">30</span>条记录</span>
                        <span>到第</span>
                        <input type="text" v-model="page">
                        <span>页</span>
                        <button @click="toPage(page)">确定</button>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="cate w">
        <div class="list">
            <a href="" class="list-item">
                <i class="iconfont icon-java"></i>
                <span>java</span>
            </a>
            <a href="" class="list-item"
            ><i class="iconfont icon-h5"></i>h5</a
            >
            <a href="" class="list-item">
                <i class="iconfont icon-python"></i>python
            </a>
            <a href="" class="list-item"
            ><i class="iconfont icon-tianchongxing-"></i>pm</a
            >
            <a href="" class="list-item"
            ><i class="iconfont icon-php_elephant"></i>php</a
            >
            <a href="" class="list-item"
            ><i class="iconfont icon-go"></i>go</a
            >
        </div>
        <a href="" class="img">
            <img src="static/uploads/cate4.jpg" alt=""/>
        </a>
        <a href="" class="img">
            <img src="static/uploads/cate5.jpg" alt=""/>
        </a>
        <a href="" class="img">
            <img src="static/uploads/cate6.jpg" alt=""/>
        </a>
    </div>
    <div class="books">
        <div class="w">
            <div class="seckill">
                <div class="seckill-header">
                    <div class="title">
                        图书秒杀
                    </div>
                    <!-- <i class="iconfont icon-huanyipi"></i> -->
                </div>
                <div class="seckill-content">

                    <a href="" class="tip">
                        <h5>距离结束还有</h5>
                        <i class="iconfont icon-shandian"></i>
                        <div class="downcount">
                            <span class="time">00</span>
                            <span class="token">:</span>
                            <span class="time">00</span>
                            <span class="token">:</span>
                            <span class="time">00</span>
                        </div>
                    </a>


                    <a href="" class="books-sec">
                        <img src="static/uploads/congwanqingdaominguo.jpg" alt="">
                        <p>从晚晴到民国</p>
                        <div>
                            <span class="cur-price">￥28.9</span>
                            <span class="pre-price">￥36.5</span>
                        </div>
                        <button>立即购买</button>
                    </a>
                    <a href="" class="books-sec">
                        <img src="static/uploads/cyuyanrumenjingdian.jpg" alt="">
                        <p>c语言入门经典</p>
                        <div>
                            <span class="cur-price">￥55.9</span>
                            <span class="pre-price">￥68.5</span>
                        </div>
                        <button>立即购买</button>
                    </a>
                    <a href="" class="books-sec">
                        <img src="static/uploads/fusang.jpg" alt="">
                        <p>扶桑</p>
                        <div>
                            <span class="cur-price">￥30.9</span>
                            <span class="pre-price">￥47.5</span>
                        </div>
                        <button>立即购买</button>
                    </a>
                    <a href="" class="books-sec">
                        <img src="static/uploads/geihaizideshi.jpg" alt="">
                        <p>给孩子的诗</p>
                        <div>
                            <span class="cur-price">￥18.9</span>
                            <span class="pre-price">￥25.5</span>
                        </div>
                        <button>立即购买</button>
                    </a>


                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="w">
            <div class="top">
                <ul>
                    <li>
                        <a href="">
                            <img src="static/img/bottom1.png" alt="">
                            <span>大咖级讲师亲自授课</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="static/img/bottom.png" alt="">
                            <span>课程为学员成长持续赋能</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="static/img/bottom2.png" alt="">
                            <span>学员真实情况大公开</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="content">
                <dl>
                    <dt>关于尚硅谷</dt>
                    <dd>教育理念</dd>
                    <!-- <dd>名师团队</dd>
                    <dd>学员心声</dd> -->
                </dl>
                <dl>
                    <dt>资源下载</dt>
                    <dd>视频下载</dd>
                    <!-- <dd>资料下载</dd>
                    <dd>工具下载</dd> -->
                </dl>
                <dl>
                    <dt>加入我们</dt>
                    <dd>招聘岗位</dd>
                    <!-- <dd>岗位介绍</dd>
                    <dd>招贤纳师</dd> -->
                </dl>
                <dl>
                    <dt>联系我们</dt>
                    <dd>http://www.atguigu.com
                    <dd>
                </dl>
            </div>
        </div>
        <div class="down">
            尚硅谷书城.Copyright ©2015
        </div>
    </div>
</div>
<script src="static/script/swiper.min.js"></script>
<script src="static/script/vue.js"></script>
<script src="static/script/axios.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        autoplay: true,
        pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        }
    })
</script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            floorPrice: "",
            peakPrice: "",
            bookList:[],
            pageInfo:{},
            cart:{},
            page:""
        },
        methods: {
            addBooK2Cart(bookId){
                var _this = this;
                axios({
                    method:"get",
                    url:"cart",
                    params:{
                        method:"add2CartItem",
                        bookId:bookId
                    }
                }).then(function (res) {
                    var data = res.data;
                    if(data.flag){
                        _this.selectCart();
                    }else {
                        alert("加入购物车失败!")
                    }
                })
            },
            selectCart(){
                var _this = this;
                axios({
                    method:"get",
                    url:"cart",
                    params:{
                        method:"selectCart"
                    }
                }).then(function (res) {
                    var data = res.data;
                    if(data.flag){
                        _this.cart = data.data;
                    }
                })
            },
            selectList(){
                var _this = this;
                axios({
                    method:"get",
                    url:"book",
                    params:{
                        method:"selectByPage"
                    }
                }).then(function (res) {
                    var data = res.data;
                    if(data.flag){
                        //var bookList = data.data;
                        //_this.bookList = bookList;
                        var pageInfo = data.data;
                        _this.pageInfo = pageInfo;

                    }
                })
            },
            toPage(target) {
                _this=this;
                if(target <= 0 || target > _this.pageInfo.totalPage){
                    alert("请输入正确的页数!");
                    return;
                }
                if(this.floorPrice != "" && this.peakPrice != ""){
                    var targetMedthod="selectList";
                }else {
                    var targetMedthod="selectByPage";
                }
                if(target != null){
                    axios({
                        method:"get",
                        url:"book",
                        params:{
                            method:targetMedthod,
                            currentPage:target,
                            floorPrice: _this.floorPrice,
                            peakPrice:_this.peakPrice,
                        }
                    }).then(function (res) {
                        var data = res.data;
                        if(data.flag){
                            var pageInfo = data.data;
                            _this.pageInfo = pageInfo;
                        }
                    })
                }
            },
            logout() {
                var existUser = sessionStorage.getItem("existUser");
                if(existUser != null){
                    //在登录状态
                    axios({
                        method:"get",
                        url:"/bookstore/user",
                        params:{
                            method:"logout"
                        }
                    }).then(function (res) {
                        var data = res.data;
                        if(data.flag){
                            sessionStorage.removeItem("existUser");
                            location.href="/bookstore/index.html";
                        }else {
                            alert("注销失败!");
                        }
                    })
                }else {
                    //不在登录状态
                    alert("你还没有登录!");
                    location.href="/bookstore/user?method=toLoginPage";
                }
            }
        },
        mounted(){
            this.selectList();
            this.selectCart();
        }
    });
</script>
</body>
</html>
